<?php echo $header; ?>
<link href="catalog/view/javascript/tabsmenu/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="catalog/view/javascript/tabsmenu/jquery-ui-personalized-1.5.2.packed.js"></script>
<script type="text/javascript" src="catalog/view/javascript/tabsmenu/sprinkle.js"></script>
<script type="text/javascript" src="catalog/view/javascript/star_rating/js/jquery-ui.custom.min.js?v=1.8"></script>
<!-- Star Rating widget stuff here... -->
<script type="text/javascript" src="catalog/view/javascript/star_rating/js/jquery.ui.stars.js?v=3.0.0b38"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery_scroll/jquery.mousewheel.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery_scroll/jScrollPane.min.js"></script>

<link rel="stylesheet" type="text/css" media="all" href="catalog/view/javascript/jquery_scroll/jScrollPane.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/star_rating/css/jquery.ui.stars.css"/>
<script type="text/javascript">		
	jQuery(function(){
		jQuery('#content .panel').jScrollPane({
			//scrollbarOnLeft:true,
			dragMinHeight: 25, 
			dragMaxHeight: 25,
			scrollbarMargin: 5,
			scrollbarWidth: 9
		});
	});
	
		jQuery(document).ready(function() {
 		jQuery(".tooltips").hover(
			function() { $(this).contents("div:last-child").css({ display: "block" }); },
			function() { $(this).contents("div:last-child").css({ display: "none" }); }
		);

		jQuery(".tooltips").mousemove(function(e) {
			var mousex = e.pageX-150;
			var mousey = e.pageY-500;
			jQuery(this).contents("div:last-child").css({  top: mousey, left: mousex });
		});
 	});

</script>

<script type="text/javascript">
		$(function(){
			$("#starify").children().not(":input").hide();
			
			// Create stars from :radio boxes
			$("#starify").stars({
				disableValue: false
			});
		});
</script>

<div class="col1 float_left">
  <div class="col1_content p20r p15t brsolid">
    <p class="tt1 whitetext">Hvid Vine</p>
    <br/>
    <div class="w702">
      <div class="w219 float_left po"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image"  class="brar"/><!--<img src="catalog/view/theme/w4u/img/img_de.png" class="brar"/>-->
        <div class="zoom"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="thickbox" rel="gallery"><img src="catalog/view/theme/w4u/img/zoom_icon.png" /></a></div>
      </div>
      <div class="w450 float_right">
        <p class="whitetext"><b><?php echo $heading_title; ?></b> </p>
         <div id="content" style="width: 450px;">
		 	<div class="panel" style="height:156px;">
				 <?php echo $description; ?>
			 </div>
		 </div>
		 <form action="<?php echo str_replace('&', '&amp;', $action); ?>" method="post" enctype="multipart/form-data" id="product">
		 <div id='product_available' style="padding-top:5px;">
		  <p><span class="yellowtext"><?php echo $text_availability; ?></span>&nbsp;<?php echo $stock; ?></p>
		  <p><span class="yellowtext"><?php echo $text_average; ?></span>&nbsp;<?php if ($average) { ?>
                  <img style="padding-bottom:2px" src="catalog/view/theme/w4u/img/stars_<?php echo $average . '.png'; ?>" alt="<?php echo $text_stars; ?>" align="absmiddle"/>
                  <?php } else { ?>
                  <?php echo $text_no_rating; ?>
                  <?php } ?></p>
			<p>
          <span class="yellowtext">
		  <?php 
		  if ($display_price) 
		  { 
		   echo $text_price."</span>"; 
				if (!$special) 
				{
					 echo '&nbsp;<span style="color: #F00;">'.$price.'</span>'; 
				} 
				else 
				{ ?>
					  &nbsp;<span style="text-decoration: line-through;"><?php echo $price; ?></span>&nbsp;<span style="color: #F00;"><?php echo $special; ?></span>
				 <?php 
				 } 
			 } 
			 ?>
			 <?php if ($discounts) { ?><br />
              <span class="yellowtext" style="float:left"><?php echo $text_discount; ?>&nbsp;&nbsp;
			  <span class="tooltips"><img src="catalog/view/theme/w4u/img/information-balloon.png" align="absmiddle" />
			  <div style="float:left; padding: 5px; margin-top: 5px; margin-bottom: 5px; width:250px" id='tool' class="tooltip-style1">
				<table style="width:100%;">
                  <tr>
                    <td style="text-align: center;"><b><?php echo $text_order_quantity; ?></b></td>
                    <td style="text-align: center;"><b><?php echo $text_price_per_item; ?></b></td>
                  </tr>
                  <?php foreach ($discounts as $discount) { ?>
                  <tr>
                    <td style="text-align: center;"><?php echo $discount['quantity']; ?></td>
                    <td style="text-align: center;"><?php echo $discount['price']; ?></td>
                  </tr>
                  <?php } ?>
                </table>
			  </div>
			  </span>
			  </span>
              <?php } ?>
		</p>
		  <p style="clear:left" >
          <span class="yellowtext"><label class="lb2 float_left"><?php echo $text_qty; ?></label></span>
		  <input type="text" class="txt4 float_left"  name="quantity"  maxlength="5" value="<?php echo $minimum; ?>"  style="text-align:center;"/><input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
                <input type="hidden" name="redirect" value="<?php echo str_replace('&', '&amp;', $redirect); ?>" />
				<?php if ($minimum > 1) { ?><br/><small><?php echo $text_minimum; ?></small><?php } ?>
         
        </p>
		</div>
		 </form>
        <br style="clear:both"/>
        <br/>
      </div>
    </div>
    <br style="clear:both" />
    <div class="w702">
      <div class="w219 float_left po"></div>
      <div class="w450 float_right"><a style="cursor:pointer" onclick="$('#product').submit();" id="add_to_cart" class="button"><img src="catalog/view/theme/w4u/img/addtocart.png" /></a> </div>
      <br style="clear:both" />
    </div>
    <br style="clear:both" />
	
	        <div id="tabvanilla" class="widget">

            <ul class="tabnav">
                <li><a href="#tab_image"><?php echo $tab_image; ?>  (<?php echo count($images); ?>)</a></li>
                <li><a href="#tab_review"><?php echo $tab_review; ?></a></li>
                <li><a href="#tab_related"><?php echo $tab_related; ?> (<?php echo count($products); ?>)</a></li>
            </ul>

            <div id="tab_image" class="tabdiv"><br />
<?php
if ($images) 
{ 

		$n=count($images);
		$i=0;
	foreach ($images as $image) 
	{ 
		if($i%4==0)
		{
			echo '<div class="w675 m15b">';
		}
		if(($i%4==3) || ($i==($n-1)))
		{

	?>
			<div class="w150 float_left"><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="thickbox" rel="gallery"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" style="border: 1px solid #DDDDDD; margin-bottom: 3px;" /></a>
              <p align="center"><?php echo $text_enlarge; ?></p>
                   
			</div>
	<?php		
		}
		else
		{
	?>
	 		<div class="w150 m25r float_left"><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="thickbox" rel="gallery"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" style="border: 1px solid #DDDDDD; margin-bottom: 3px;" /></a>
              <p align="center"><?php echo $text_enlarge; ?></p>
			</div>
	<?php		
		}
		
		if(($i%4==3) || ($i==($n-1)))
		{
			echo '<br style="clear:both" /><div class="bbdot p15t"></div></div>';
		}

	$i++;
	} 
}
else
{
	echo '<div style="padding: 10px; margin-bottom: 10px;">'.$text_no_images.'</div>';
}
?>		  

	  
			   
            </div><!--/popular-->
            
            <div id="tab_review" class="tabdiv"><br />
                
				<div style="margin-left:10px">
				<div style="width:200px; height:24px; background:url(catalog/view/theme/w4u/img/bg_title.png) right; color:#FFFFFF; font-weight:bold; padding-left:10px; vertical-align:middle"><span style="padding-top:5px"><?php echo $text_current_review; ?></span></div><div class="p5b"></div>
				<div id="review"></div><br />
				<div style="width:200px; height:24px; background:url(catalog/view/theme/w4u/img/bg_title.png) right; color:#FFFFFF; font-weight:bold; padding-left:10px; vertical-align:middle"><span style="padding-top:5px" id="review_title"><?php echo $text_write; ?></span></div><br  />
				<div style="margin-left:10px" class="w450">
				<form name="reviewfrm">
				<div align="center" id="review_message" style="display:none; width:363px; padding-bottom:10px;"></div>
            	<label class="lb1 float_left"><?php echo $entry_name; ?></label><input name="name" maxlength="50" type="text" class="txt2 float_left"/>
                <label class="lb1 float_left"><?php echo $entry_review; ?></label> <textarea name="text"  class="txt3 float_left" rows="5"></textarea><br style="clear:both" />
				<label class="lb1 float_left">&nbsp;&nbsp;</label><span style="font-size: 11px;"><?php echo $text_note; ?></span>
				<br style="clear:both" /><label class="lb1 float_left"><?php echo $entry_rating; ?></label>
				<div class="ctrlHolder">
					<div class="multiField" id="starify">
						<label for="vote1" class="blockLabel"><input type="radio" name="rating" id="vote1" value="1" /> Poor</label>
						<label for="vote2" class="blockLabel"><input type="radio" name="rating" id="vote2" value="2" /> Fair</label>
						<label for="vote3" class="blockLabel"><input type="radio" name="rating" id="vote3" value="3" /> Average</label>
						<label for="vote4" class="blockLabel"><input type="radio" name="rating" id="vote4" value="4" /> Good</label>
						<label for="vote5" class="blockLabel"><input type="radio" name="rating" id="vote5" value="5" /> Excellent</label>
					</div>
				</div><br />
				<br style="clear:both" />
				<label class="lb1 float_left"><?php echo $entry_captcha; ?></label>
                <input name="captcha" maxlength="8" type="text" class="txt_captchar float_left"/>
				<img style="padding-left:10px" src="catalog/view/javascript/captcha/create_image.php?type=1" id="captcha"   align="absmiddle"/>				
<!--				<img src="index.php?route=product/product/captcha" id="captcha"  />	-->
				<br /><br style="clear:both" />
				<label class="lb1 float_left">&nbsp;&nbsp;</label>
                <a  onclick="review();" style="cursor:pointer" ><img src="catalog/view/theme/w4u/img/send_but.png" /></a> <a href="javascript:document.forms[2].reset()" ><img src="catalog/view/theme/w4u/img/reset_but.png" /></a>
           		<br style="clear:both" />
					</form>
          		</div>
				</div>
            </div><!--/recent-->
            
            <div id="tab_related" class="tabdiv"><br />
<?php
if ($products) 
{ 

		$n=count($products);
		$i=0;
	foreach ($products as $product) 
	{ 
		if($i%4==0)
		{
			echo '<div class="w675 m15b">';
		}
		if(($i%4==3) || ($i==($n-1)))
		{

	?>
			<div class="w150 float_left"> <a href="<?php echo str_replace('&', '&amp;', $product['href']); ?>"><img src="<?php echo $product['thumb']; ?>" /></a>
              <p class="p10t"><a href="<?php echo str_replace('&', '&amp;', $product['href']); ?>"><?php echo $product['name']; ?></a></p>
              <p class="yellowtext">
			  Price: 
			  <?php 
			  if ($display_price) 
			  { 
			  	 if (!$product['special']) 
					{ 
				 		echo $product['price']; 
					} 
					else 
					{ 
					?>
          <span style="font-size: 11px; color: #900; text-decoration: line-through;"><?php echo $product['price']; ?></span> <span style="font-size: 11px; color: #F00;"><?php echo $product['special']; ?></span>
			  <?php 
			  	}
			  } 
			  ?>
			  </p>              
			  <?php if ($product['rating']) { ?>
			  <!--<img src="catalog/view/theme/default/image/stars_<?php echo $product['rating'] . '.png'; ?>" alt="<?php echo $product['stars']; ?>" /><br />-->
			  <?php } ?>
			  <!--<a href="<?php echo $product['add']; ?>" class="button_add_small"><img src="catalog/view/theme/w4u/img/but.png" class="p10t"/></a> -->
			</div>
	<?php		
		}
		else
		{
	?>
	 		<div class="w150 m25r float_left"><a href="<?php echo str_replace('&', '&amp;', $product['href']); ?>"><img src="<?php echo $product['thumb']; ?>" /></a>
              <p class="p10t"><a href="<?php echo str_replace('&', '&amp;', $product['href']); ?>"><?php echo $product['name']; ?></a></p>
              <p class="yellowtext">
			  Price: 
			  <?php 
			  if ($display_price) 
			  { 
			  	 if (!$product['special']) 
					{ 
				 		echo $product['price']; 
					} 
					else 
					{ 
					?>
          <span style="font-size: 11px; color: #900; text-decoration: line-through;"><?php echo $product['price']; ?></span> <span style="font-size: 11px; color: #F00;"><?php echo $product['special']; ?></span>
			  <?php 
			  	}
			  } 
			  ?>
			  </p>              
			  <?php if ($product['rating']) { ?>
			  <!--<img src="catalog/view/theme/default/image/stars_<?php echo $product['rating'] . '.png'; ?>" alt="<?php echo $product['stars']; ?>" /><br />-->
			  <?php } ?>
			  <!--<a href="<?php echo $product['add']; ?>" class="button_add_small"><img src="catalog/view/theme/w4u/img/but.png" class="p10t"/></a> -->
			  
			</div>
	<?php		
		}
		
		if(($i%4==3) || ($i==($n-1)))
		{
			echo '<br style="clear:both" /><div class="bbdot p15t"></div></div>';
		}

	$i++;
	} 
}
else
{
	echo '<div style="padding: 10px; margin-bottom: 10px;">'.$text_no_related.'</div>';
}
?>		  
            </div><!--featured-->

        </div><!--/widget-->
<script type="text/javascript"><!--
$('#review .pagination a').live('click', function() {
	$('#review').slideUp('slow');
		
	$('#review').load(this.href, function(response, status, xhr) {
	  if (status == "success") 
	  {
  		$('#review').slideDown('slow');
	  }
	});

	
	return false;
});			

$('#review').load('index.php?route=product/product/review&product_id=<?php echo $product_id; ?>');

function review() 
{
	$.ajax({
		type: 'POST',
		url: 'index.php?route=product/product/write&product_id=<?php echo $product_id; ?>',
		dataType: 'json',
		data: 'name=' + encodeURIComponent($('input[name=\'name\']').val()) + '&text=' + encodeURIComponent($('textarea[name=\'text\']').val()) + '&rating=' + encodeURIComponent($('input[name=\'rating\']').val()) + '&captcha=' + encodeURIComponent($('input[name=\'captcha\']').val()), // NDK - delete the altitude ":checked" in rating
		beforeSend: function() {
			$('.success, .warning').remove();
			//$('#review_button').attr('disabled', 'disabled');
			//$('#review_title').after('<div class="wait"><img src="catalog/view/theme/default/image/loading_1.gif" alt="" /> <?php echo $text_wait; ?></div>');
		},
		complete: function() {
			//$('#review_button').attr('disabled', '');
			//$('.wait').remove();
		},
		success: function(data) {
			if (data.error) {
				$('#review_message').html('<span class="error">'+data.error+ '</span>');
				$('#review_message').show();
			}
			
			if (data.success) {
				$('#review_message').html('<div class="success">' + data.success + '</div>');
				$('#review_message').show();				
				$('input[name=\'name\']').val('');
				$('textarea[name=\'text\']').val('');
				$('input[name=\'rating\']:checked').attr('checked', '');
				$('input[name=\'captcha\']').val('');
			}
		}
	});
}
//--></script>
	
  </div>
</div>
<?php echo $column_right; ?> <?php echo $footer; ?> 